블로그_14_프로젝트 페이지 구축 및 UI 개선

사이드바 및 라우팅 개편

기존에는 PurpleSim, rootscan, asmspeak 같은 라이브 데모 프로젝트가 메인 사이드바에 개별 아이콘으로 나열되어 있었다. 일반 노트북이나 저널 페이지와 달리 공간을 많이 차지하고 통일성도 부족해 보였다.

이를 개선하려고 별도의 허브 랜딩 페이지를 새로 만들고 이곳에 모든 인터랙티브 앱을 모았다. 전용 서브 사이드바도 같이 추가해서, 라이브 데모 개별 페이지에 들어갈 때는 메인 사이드바를 숨기고 화면을 더 넓고 몰입감 있게 쓰도록 디자인했다.

이제는 더 이상 쓰지 않는 태그 탐색 라우터(/tags)와 관련 컴포넌트도 전부 지웠다.

가로 슬라이드 뷰(Carousel) 도입

프로젝트 소개 화면에 있는 각 카드에는 개발 의도, 사용 기술, 회고 등 들어갈 정보가 꽤 많다. 기존 3단 수직 레이아웃으로는 이 텍스트를 감당하기 어려워서, 프레젠테이션처럼 화면을 한 장씩 넘기는 가로형 캐러셀 슬라이드 구조로 변경했다.

화면 너비에 맞춰 w-[85vw], md:w-[75vw] 단위로 카드 크기를 조절했다. 여기서 다음 슬라이드의 일부분이 우측 여백에 아주 살짝 걸쳐서 보이게 설계했는데, 사용자가 직관적으로 스와이프나 가로 스크롤 액션을 떠올리도록 유도한 장치다.

가장 애를 먹은 부분은 무한 순환 스크롤(Infinite Scroll) 구현이었다. 원본 데이터 배열을 5배수로 복제해 가상의 트랙을 만들고, 스크롤이 양 끝 가장자리에 닿을 때 순간적으로 scrollSnapType 속성을 풀어서 티 안 나게 배열 정중앙으로 스크롤 위치를 돌려놓는 공식을 썼다. 그 결과 스크롤을 끝없이 넘길 수 있는 매끄러운 순환 캐러셀이 만들어졌다.

기존 디자인에서 화면 하단 공간만 통째로 차지하던 "실행하기" 버튼을 빼고, 기술 스택 배지 끝부분에 "보러가기"라는 아담한 인라인 버튼을 올렸다. 화면 뷰포트 양옆에 고정된(fixed) 화살표 버튼도 추가해서 내용이 아무리 길어도 언제든 다음 슬라이드를 쉽고 직관적으로 넘길 수 있도록 했다.

내용 개선

기존 텍스트들은 다소 감상적이고 개인 개발 일기장 느낌이 강했다. 이 부분을 실무 성과와 경험 위주의 텍스트로 전부 고쳐 썼다.

• 핵심 문제 정의 (Problem)
• 아키텍처 및 해결 주안점 (Solution)
• 운영 성과 및 확장 파이프라인 (Impact)

위처럼 목차를 평가하기 좋게 바꾸고, 글 내용도 구체적인 아키텍쳐 도출 과정과 트러블슈팅 경험으로 밀도 있게 채웠다.

여기에 프로젝트 스펙을 한눈에 보여주려고 정량적 대시보드(Metrics Dashboard) 컴포넌트도 추가했다. 프레젠테이션 카드 상단에 4칸짜리 다이얼을 넣어 "75% 빌드 시간 단축", "증분 스캐닝 도입" 같은 핵심 수치를 긴 텍스트를 다 읽지 않고도 빠르게 가져갈 수 있게 시각화했다.

시각화 컴포넌트 추가 및 FAQ 다듬기

본문 내용이 길어지고 단어가 줄바꿈 과정에서 어색하게 깨지는 문제는 text-justify와 너비 상한선(max-w-4xl)을 지정해 단정하게 정돈했다.

파이프라인 진행 과정 등 단순 텍스트만으로 나열하기 아쉬운 정보들은 ArchitectureFlow, PerformanceComparison 같은 인라인 리액트 컴포넌트를 만들어서 직접 그려 넣었다. 화살표 블록으로 데이터 흐름을 직관적으로 보여주고 전후 성능을 명확하게 비교해두니 실무 느낌이 훨씬 잘 묻어난다.

마지막으로 각 슬라이드 하단에 <details> 토글 형태의 ProjectFAQ 영역을 만들고 프로젝트별 예상 질문과 답변을 달았다.